@charset "utf-8";
@import "reset";
// 公用样式
.dn{
    display: none;
}
.abs{
    position: absolute;
}
//
//场景一序列帧动画
@-webkit-keyframes yun1{
    0%{transform:translate3d(-150px,0,0);}
    100% {transform:translate3d(100px,0,0);}
}
@-webkit-keyframes yun2{
    0%{transform:translate3d(150px,0,0);}
    100% {transform:translate3d(-100px,0,0);}
}
@-webkit-keyframes ft{
    0%{left: 80%;}
    100% {left: 10%;}
}
@-webkit-keyframes moveGroup{
    0%{left: 35px;}
    100% {left: -40px;}
}
@-webkit-keyframes tiparrow{
    0%{transform:translate3d(0,6px,0);}
    100% {transform:translate3d(0,-2px,0);opacity: .5;}
}
@-webkit-keyframes diban1{
    0%{transform:scale(1.4,1);}
    100%{transform:scale(1.2,1);}
}
@-webkit-keyframes thb{
    0%{transform:translate3d(10px,0,0);}
    100%{transform:translate3d(-10px,0,0);}
}
@-webkit-keyframes light{
    0%{opacity: 1;}
    100%{opacity: 0;}
}
//场景三序列帧动画
@-webkit-keyframes thb1Box{
    0%{transform:translate3d(60px,0,0);}
    100%{transform:translate3d(-60px,0,0);}
}
@-webkit-keyframes p3_db1{
    0%{transform:translate3d(30px,0,0);}
    100%{transform:translate3d(0,0,0);}
}
@-webkit-keyframes p3_db2{
    0%{transform:translate3d(-30px,0,0);}
    100%{transform:translate3d(0,0,0);}
}
@-webkit-keyframes qp{
    0%{transform:translate3d(0,0,0);opacity: 1;}
    100%{transform:translate3d(40px,0,0);opacity: .2;}
}
@-webkit-keyframes p3_db5{
    0%{transform:scale(1,1);}
    100%{transform:scale(1,1.3);}
}
@-webkit-keyframes tipArow{
    0%{transform:translate3d(0,0,0);}
    100%{transform:translate3d(0,10px,0);}
}
@-webkit-keyframes rotate{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
@-webkit-keyframes yf1{
    0%{transform:translate3d(0,0,0);}
    90%{transform:translate3d(-45px,-120px,0) rotate(30deg);opacity: 1;}
    100%{transform:translate3d(-45px,-120px,0)  rotate(40deg);opacity: 0;}
}
@-webkit-keyframes yf2{
    0%{transform:translate3d(0,0,0);}
    90%{transform:translate3d(-5px,-120px,0) rotate(-30deg);opacity: 1;}
    100%{transform:translate3d(-5px,-120px,0)  rotate(-40deg);opacity: 0;}
}
@-webkit-keyframes yf3{
    0%{transform:translate3d(0,0,0);}
    90%{transform:translate3d(40px,-130px,0) rotate(-30deg);opacity: 1;}
    100%{transform:translate3d(40px,-130px,0)  rotate(-40deg);opacity: 0;}
}
@-webkit-keyframes tip2{
    0%{transform:translate3d(0,0,0);}
    75%{transform:translate3d(-25px,0,0);opacity: 1;}
    100%{transform:translate3d(-25px,0,0);opacity: 0;} 
}
//音乐按钮样式
.musicBtn {
    position: absolute;
    width: .48rem;
    height: .48rem;
    background: url(../img/music.png) no-repeat center/contain;
    z-index: 98;
    top: .2rem;
    right: .2rem;
}
.pause {
    background: url(../img/pause.png) no-repeat center/contain;
}
//主体样式
body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.enter {
    top: 0;
}
.t_center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.homePage{
    //到边上就隐藏
    overflow: hidden;
    position: absolute;
    top: 0;
    left: -3.2rem;
    width: 12.85rem;
    height: 100%;
    perspective: 500px;
    
    .tiparrow {
        left: 50%;
        bottom: 1.8rem;
        margin-left: -.105rem;
        -webkit-animation: tiparrow 1s infinite both;
    }
    .yun1 {
        width: 6.24rem;
        top: .24rem;
        right: .7rem;
        -webkit-animation: yun1 14s linear .5s infinite both alternate;
    }
    .yun2 {
        width: 7.58rem;
        top: -.08rem;
        left: -2.74rem;
        -webkit-animation: yun2 14s linear .5s infinite both alternate;
    }
    .yun3 {
        width: 7.58rem;
        top: .65rem;
        right: -3.33rem;
        -webkit-animation: yun1 14s linear .5s infinite both alternate;
    }
    .ft {
        width: 0.96rem;
        left: 0rem;
        z-index: 9;
        top: .72rem;
        -webkit-animation: ft 20s linear .5s infinite both;
    }
    .door1 {
        width: 1.3rem;
        height: 1.3rem;
        bottom: 2.2rem;
    }
    >.inner {
        position: absolute;
        width: 12.85rem;
        height: 8.06rem;
        left: 0;
        bottom: 0;
        overflow: hidden;
        .word {
            top: 6.6rem;
        }
        .zsp {
            left: 3.6rem;
            bottom: 0;
        }
        .hulan {
            left: 9.31rem;
            bottom: 0;
        }

        //入门提示箭头
        .tiparrow {
            left: 50%;
            top: 8.57rem;
            margin-left: -.105rem;
            -webkit-animation: tiparrow 1s infinite both;
        }
        .moveGroup {
            position: absolute;
            width: 14rem;
            height: 8.06rem;
            left: 0;
            -webkit-animation: moveGroup 5s linear .5s infinite both alternate;
            bottom: 0;
            .floor1 {
                width: 100%;
                bottom: 0;
                left: 0;
                height: 2.08rem;
            }
            .panda {
                left: -.575rem;
                bottom: 0;
            }
            .ludeng {
                bottom: .57rem;
                left: 8.28rem;
            }
            
        }
    }
}
.t_center {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
}
.page2 {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    perspective: 500px;
    >.inner {
        width: 9.64rem;
        height: 100%;
        top: 0;
        left: -1.62rem;
        .dingdeng {
            top: 0;
        }
        .diban1 {
            bottom: 0;
            left: .94rem;
            height: 1.7rem;
            -webkit-animation: diban1 1s linear .5s infinite both alternate;
        }
        .door2Box {
            width: 5.68rem;
            height: 6.88rem;
            top: 1.77rem;
            overflow: hidden;
            .thb {
                top: -.2rem;
                left: -.54rem;
                -webkit-animation: thb 2s linear .5s infinite both alternate;
            }
            .diban2 {
                bottom: 0;
            }
            .doorL {
                width: 2.84rem;
                height: 6.88rem;
                left: 0;
                top: 0;
                background: url(../img/doorL2.png) no-repeat center/contain;
            }
            perspective: 500px;
            .doorR {
                width: 2.84rem;
                height: 6.88rem;
                right: 0;
                top: 0;
                background: url(../img/doorR2.png) no-repeat center/contain;
                transform-origin: right;
                transition: all 1s;
            }
            .tip1 {
                left: 3.6rem;
                top: 3rem;
                -webkit-animation: light 1s infinite both alternate;
            }
        }
    }
}
//场景三
.page3 {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    perspective: 500px;
    .swiper-container {
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        z-index: 1;
        width: 100%;
        height: 100%;
        .swiper-slide{
            width: 5550px;
        }
    }
    .container {
        width: 95.8rem;//需要改为动态计算宽度
        height: 100%;
        .thb1Box {
            width: 52.1rem;
            height: 1.2rem;
            overflow: hidden;
            top: 0;
            left: 0;
            .p3_thb1 {
                top: 0;
                left: -1.5rem;
                -webkit-animation: thb1Box 6s linear infinite both alternate;
            }
        }
        .thb2Box {
            width: 27.4rem;
            height: 2.13rem;
            overflow: hidden;
            top: 0;
            right: 6.2rem;
        }
        .p3_thb2 {
            right: 0;
            top: 0;
        }
        .bgrect {
            width: 62.49rem;
            height: 6.71rem;
            left: .31rem;
            top: .92rem;
            background: url(../img/p3/bgrect.png) no-repeat center/contain;
        }
        .bgrect2 {
            width: 20.6rem;
            height: 5.29rem;
            right: 0rem;
            top: 1.76rem;
            background: url(../img/p3/bgrect2.png) no-repeat center/contain;
        }
        .part1 {
            width: 13.54rem;
            height: 100%;
            left: 0;
            top: 0;
            .p3_db1 {
                width: 5.87rem;
                left: 1.3rem;
                bottom: 0;
                -webkit-animation: p3_db1 1s linear infinite both alternate;
            }
            .p3_db2 {
                width: 5.86rem;
                left: 3.7rem;
                bottom: 0;
                -webkit-animation: p3_db2 1s linear infinite both alternate;
            }
            .jsb {
                width: 12.5rem;
                right: 0;
                top: .17rem;
            }
        }
        .part2 {
            width: 28.64rem;
            height: 100%;
            top: 0;
            left: 13.54rem;
            .p3_db3 {
                width: 7.96rem;
                left: 16.02rem;
                bottom: 0;
                -webkit-animation: p3_db1 1s linear infinite both alternate;
            }
            .p3_db4 {
                width: 7.95rem;
                left: 20.21rem;
                bottom: 0;
                -webkit-animation: p3_db2 1s linear infinite both alternate;
            }
            .p3_xmzb {
                width: 28.64rem;
                top: .7rem;
                left: 0;
            }
            .p3_zs1 {
                width: 4.64rem;
                left: 10.4rem;
                top: 1.27rem;
            }
            .p3_rL {
                left: 5rem;
                top: 3rem;
                height: 1.52rem;
                -webkit-animation: light .8s infinite both alternate;
            }
            .p3_lL {
                width: 1.51rem;
                left: 1.86rem;
                top: 3rem;
                -webkit-animation: light .8s infinite both alternate;
            }
            .p3_tfk {
                width: 1.72rem;
                height: .85rem;
                left: 3.42rem;
                top: 1.21rem;
                background: url(../img/p3/tfk.png) no-repeat center/contain;
                .p3_qp1 {
                    width: 0.29rem;
                    left: 1.5rem;
                    top: .44rem;
                    -webkit-animation: qp 1.4s linear infinite both;
                }
                .p3_qp2 {
                    width: 0.42rem;
                    left: 1.5rem;
                    top: .22rem;
                    -webkit-animation: qp 3s linear infinite both;
                }
                .p3_qp3 {
                    width: 0.18rem;
                    left: 1.5rem;
                    top: .57rem;
                    -webkit-animation: qp 1s linear infinite both;
                }
                .p3_qp4 {
                    width: 0.12rem;
                    left: 1.5rem;
                    top: .36rem;
                    -webkit-animation: qp .8s linear infinite both;
                }
                .p3_qp5 {
                    width: 0.1rem;
                    left: 1.5rem;
                    top: .38rem;
                    -webkit-animation: qp 1.2s linear infinite both;
                }
                .p3_qp6 {
                    width: 0.24rem;
                    left: 1.5rem;
                    top: .1rem;
                    -webkit-animation: qp 2s linear infinite both;
                }
                .p3_qp7 {
                    width: 0.11rem;
                    left: 1.5rem;
                    top: .2rem;
                    -webkit-animation: qp .6s linear infinite both;
                }
            }
            .zt {
                width: 7.5rem;
                height: 4.68rem;
                left: .72rem;
                bottom: 0;
                background: url(../img/p3/zt.png) no-repeat center/contain;
                .p3_ztp1 {
                    left: 1.34rem;
                    top: -.47rem;
                    width: 1.49rem;
                }
                .p3_ztp2 {
                    width: 1.49rem;
                    right: 1.65rem;
                    top: -.47rem;
                }
                .p3_ztp3 {
                    width: 1.49rem;
                    left: 1.31rem;
                    top: 1.39rem;
                }
                .p3_ztp4 {
                    width: 1.49rem;
                    right: 1.39rem;
                    top: 1.31rem;
                }
            }
            .p3_xmjs {
                width: 20.02rem;
                left: 8.4rem;
                top: 1.16rem;
            }
        }
        .part3 {
            width: 9.68rem;
            height: 100%;
            top: 0;
            left: 42.18rem;
            background: url(../img/p3/part3Bg.png) no-repeat left .7rem/9.67rem 8.97rem;
            .gq {
                left: 2.89rem;
                top: 4.38rem;
                width: 5.59rem;
                height: 5.36rem;
                background: url(../img/p3/gq.png) no-repeat center/contain;
                .yf1 {
                    width: 0.41rem;
                    left: 3.4rem;
                    top: 1.8rem;
                    -webkit-animation: yf1 2s infinite both;
                }
                .yf2 {
                    width: 0.34rem;
                    left: 3.4rem;
                    top: 1.8rem;
                    -webkit-animation: yf2 2.4s 1s infinite both;
                }
                .yf3 {
                    width: 0.68rem;
                    left: 3.4rem;
                    top: 1.8rem;
                    -webkit-animation: yf3 2.8s 1.4s infinite both;
                }
            }
        }
        .part4 {
            width: 26.7rem;
            height: 100%;
            top: 0;
            left: 51.82rem;
            .p3_db5 {
                width: 12.41rem;
                left: .4rem;
                bottom: 0;
                -webkit-animation: p3_db5 1s linear infinite both alternate;
            }
            .p3_db6 {
                width: 7.22rem;
                left: 11.64rem;
                bottom: 0;
                -webkit-animation: p3_db2 1s linear infinite both alternate;
            }
            .p3_dpz1 {
                left: 6.46rem;
                top: 0;
                width: 1.84rem;
                height: 3.88rem;
                background: url(../img/p3/dpz1.png) no-repeat center/contain;
            }
            .p3_dpz2 {
                left: 6.46rem;
                top: 0;
                width: 1.84rem;
                height: 3.88rem;
                background: url(../img/p3/dpz2.png) no-repeat center/contain;
                -webkit-animation: light 1.6s infinite both alternate;
            }
            .ylzt {
                width: 26.7rem;
                height: 9.65rem;
                top: .43rem;
                left: 0;
                background: url(../img/p3/ylzt.png) no-repeat center/contain;
                .tipArow1 {
                    left: 12.6rem;
                    top: 1.2rem;
                }
                .tipArow2 {
                    right: 3rem;
                    top: 2rem;
                }
                .mp1 {
                    width: 2rem;
                    left: 9.7rem;
                    top: 6.2rem;
                }
                .tipArow {
                    width: .22rem;
                    height: .28rem;
                    background: url(../img/tc/tipArow.png) no-repeat center/contain;
                    -webkit-animation: tipArow 1.2s infinite both;
                }
                .photo1 {
                    width: 6.11rem;
                    height: 3.95rem;
                    left: 9.57rem;
                    top: 2.07rem;
                    background: url(../img/p3/photo1.png) no-repeat center/contain;
                }
                .mp2 {
                    width: 1.48rem;
                    right: 1rem;
                    top: 1.6rem;
                }
                .tc2Click {
                    width: 3.6rem;
                    height: 4.44rem;
                    right: 1rem;
                    top: 2.45rem;
                    background: url(../img/p3/tc2Click.png) no-repeat center/contain;
                    .p3_sz {
                        width: 0.09rem;
                        left: 1.16rem;
                        top: 1.96rem;
                        -webkit-transform-origin: center .42rem;
                        -webkit-animation: rotate 60s linear infinite both;
                    }
                    .p3_fz {
                        width: 0.09rem;
                        left: 1.16rem;
                        top: 1.9rem;
                        -webkit-transform-origin: center .46rem;
                        -webkit-animation: rotate 1s linear infinite both;
                    }
                }
                .hd1 {
                    right: 7.7rem;
                    top: 2.8rem;
                    width: .56rem;
                    height: .47rem;
                    background: url(../img/p3/hd1.png) no-repeat center/contain;
                    -webkit-animation: light 1s infinite both alternate;
                }
                .hd2 {
                    right: 7.1rem;
                    top: 3rem;
                    width: .46rem;
                    height: .4rem;
                    background: url(../img/p3/hd2.png) no-repeat center/contain;
                    -webkit-animation: light 1s infinite .5s both alternate;
                }
            }
        }
        .part5 {
            width: 7.28rem;
            height: 100%;
            top: 0;
            left: 78.5rem;
            perspective: 500px;
            .p3_dd {
                width: 3.02rem;
                top: .8rem;
            }
            >.inner {
                width: 7.28rem;
                height: 8.18rem;
                left: 0;
                bottom: 0;
                background: url(../img/p3/kjztenter.png) no-repeat center/contain;
                .kjztDoor {
                    width: 3.64rem;
                    height: 4.11rem;
                    top: 1.82rem;
                    left: 1.9rem;
                    .p3_doorL {
                        width: 1.82rem;
                        left: 0;
                        top: 0;
                    }
                    .p3_doorR {
                        width: 1.82rem;
                        right: 0;
                        top: 0;
                    }
                }
            }
        }
        .tip2 {
            width: 1.09rem;
            transition: 0.2s;
            left: 3.6rem;
            top: 6.4rem;
            -webkit-animation: tip2 1s infinite both;
        }
        .tip3 {
            left: 4.2rem;
            top: 6rem;
            -webkit-animation: light 1s infinite both alternate;
            width: .86rem;
        }
    }
}

